<template>
  <div class="box">
    <div class="top">
      <img src="/static/imgs_s02/s02_giftcard01.png" alt />
    </div>
    <div class="content-1">
      <p>来杯咖啡吧</p>
      <div class="content-a">
        <div class="img1">
          <img src="/static/imgs_s02/s02_giftcard05.png" alt />
        </div>
        <div class="img2">
          <img src="/static/imgs_s02/s02_giftcard02.png" alt />
          <span>hey~想你了！</span>
        </div>
      </div>
    </div>
    <!-- /////////////// -->
    <div class="content-2">
      <p>小心意</p>
      <div class="content-b">
        <div class="img3">
          <img src="/static/imgs_s02/s02_giftcard03.png" alt />
          <span>谢谢你</span>
        </div>
        <div class="img4">
          <img src="/static/imgs_s02/s02_giftcard04.png" alt />
          <span>想你啦</span>
        </div>
      </div>
    </div>
    <!-- ////////////// -->
    <div class="content-3">
      <p>来杯咖啡吧</p>
      <div class="content-c">
        <div class="img5">
          <img src="/static/imgs_s02/s02_giftcard05.png" alt />
          <span>一起去玩吧</span>
        </div>
        <div class="img6">
          <img src="/static/imgs_s02/s02_giftcard02.png" alt />
          <span>hey~想你了！</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {},

  created() {
    // let app = getApp()
  }
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.box {
  width: 100%;
  background: #f4f4f4;
}
.top img {
  width: 375px;
  height: 299px;
}
.img1,
.img3,
.img5 {
  width: 160px;
  height: 124px;
  margin-left: 18px;
  background: white;
}
.img2,
.img4,
.img6 {
  width: 160px;
  height: 124px;
  margin-left: 21px;
  background: white;
}
.img1 img {
  width: 159px;
  height: 95px;
}
.img2 img {
  width: 159px;
  height: 95px;
}
.img3 img {
  width: 159px;
  height: 95px;
}
.img4 img {
  width: 159px;
  height: 95px;
}
.img5 img {
  width: 159px;
  height: 95px;
}
.img6 img {
  width: 159px;
  height: 95px;
}
.content-a,
.content-b,
.content-c {
  display: flex;
  flex-direction: row;
}
p {
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  margin-left: 18px;
  margin-bottom: 17px;
}
.content-1 p {
  margin-top: 24px;
}
.content-2 p {
  margin-top: 23px;
}
.content-3 p {
  margin-top: 25px;
}
span {
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  margin-top: 7px;
  font-size: 11px;
}
.img2 span {
  margin-left: 47px;
}
.img3 span {
  margin-left: 61px;
}
.img4 span {
  margin-left: 61px;
}
.img5 span {
  margin-left: 46px;
}
.img6 span {
  margin-left: 47px;
}
</style>
